<template>
  <div>
    <!-- 基本信息 -->
    <el-collapse v-model="activeNames1" style="margin:20px;border:1px solid #eee">
      <el-collapse-item title="基本信息" style="background-color:#f8faff" name="1">
        <el-form :model="form">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="运输任务编号：" prop="id">
                <el-input v-model="form.id" disabled style="width:50%" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车牌号码：" prop="licensePlate">
                <el-input v-model="form.licensePlate" disabled style="width:40%" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="调度机构：" prop="startAgency">
                <el-input v-model="form.startAgency" disabled style="width:40%" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="起始地：" prop="startAgency">
                <el-input v-model="form.startAgency" disabled style="width:40%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="目的地：" prop="endAgency">
            <el-input v-model="form.endAgency" disabled style="width:30%" />
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <!-- 任务轨迹 -->
    <el-collapse v-model="activeNames2" style="margin:20px;border:1px solid #eee;margin-top:50px">
      <el-collapse-item title="任务轨迹" style="background-color:#f8faff" name="1">

        <el-form :model="form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item v-model="form.id" label="车牌号：" prop="licensePlate">
                <el-input v-model="form.licensePlate" disabled style="width:50%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="司机：" prop="drivers">
                <el-input v-model="form.drivers" disabled style="width:50%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划发车时间：" prop="planDepartureTime">
                <el-input v-model="form.planDepartureTime" disabled style="width:50%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="实际发车时间：" prop="actualDepartureTime">
                <el-input v-model="form.actualDepartureTime" disabled style="width:50%" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="计划到达时间：" prop="planArrivalTime">
                <el-input v-model="form.planArrivalTime" disabled style="width:50%" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="实际到达时间：" prop="actualArrivalTime">
                <el-input v-model="form.actualArrivalTime" disabled style="width:50%" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </el-collapse-item>
    </el-collapse>

    <!-- 货品信息 -->
    <el-collapse v-model="activeNames3" style="margin:20px;border:1px solid #eee;margin-top:50px">
      <el-collapse-item title="货物信息" name="1">
        <div v-if="aa[0]===null" class="style">
          <img src="./images/pic-kong.png" alt="" style="margin-top: 20px;width: 25%;height: 25%;">
          <div>这里空空如也</div>
        </div>
        <el-table v-else :data="aa">
          <el-table-column label="序号" type="index" />
          <el-table-column label="运单编号" prop="[0].id" />
          <el-table-column label="下单时间" prop="[0].order.createTime" />
          <el-table-column label="发件人姓名" prop="[0].order.senderName" />
          <el-table-column label="发件人电话" prop="[0].order.senderPhone" />
          <el-table-column label="发件人地址" prop="[0]order.senderAddress" />
          <el-table-column label="操作">
            <router-link :to="{'path':`/detail/asdasd/${form.id}`}">查看详情</router-link>
          </el-table-column>

        </el-table>

      </el-collapse-item>

    </el-collapse>

    <!-- 交付照片 -->
    <el-collapse v-model="activeNames4" style="margin:20px;margin-top:50px">
      <el-collapse-item title="交付照片" name="1">

        <el-row :gutter="20">
          <el-form :model="form" style="display:flex">
            <el-col :span="12">
              <el-form-item prop="deliverPicture" label="货品照片">
                <div>
                  <!-- <ImageUpload ref="deliverPicture" style="margin:30px 0 0 30px" /> -->
                  <img v-if="form.deliverPicture" :src="form.deliverPicture" alt="" style="width:100px">
                  <img v-else src="./images/truck-empty.png" alt="">
                </div>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="凭证照片" prop="cargoPickUpPicture">
                <!-- <ImageUpload ref="cargoPickUpPicture" style="margin:30px 0 0 30px" /> -->
                <img v-if="form.cargoPickUpPicture" :src="form.cargoPickUpPicture" alt="" width="100px">
                <img v-else src="./images/truck-empty.png" alt="">

              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

      </el-collapse-item>
    </el-collapse>

    <!-- 提货照片 -->
    <el-collapse v-model="activeNames5" style="margin:20px;margin-top:50px">
      <el-collapse-item title="提货照片" name="1">

        <el-row :gutter="20">
          <el-form :model="form" style="display:flex">
            <el-col :span="12">
              <!-- <ImageUpload ref="cargoPicture" style="margin:30px 0 0 30px" /> -->
              <img v-if="form.cargoPicture" :src="form.cargoPicture" alt="" style="margin:20px;width:100px">
              <img v-else src="./images/truck-empty.png" alt="">
            </el-col>

            <el-col :span="12">
              <el-form-item label="凭证照片" prop="transportCertificate">
                <!-- <ImageUpload ref="transportCertificate" style="margin:30px 0 0 30px" /> -->
                <img v-if="form.cargoPicture" :src="form.transportCertificate" alt="" style="margin:20px;width:100px">
                <img v-else src="./images/truck-empty.png" alt="">
              </el-form-item>
            </el-col>

          </el-form>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getdetail } from '@/api/modules/scheduling/transportationTask'
// 照片组件
// import ImageUpload from '@/components/ImageUpload'
export default {
  // components: { ImageUpload },
  data() {
    return {
      // 下拉框默认下拉
      activeNames1: ['1'],
      activeNames2: ['1'],
      activeNames3: ['1'],
      activeNames4: ['1'],
      activeNames5: ['1'],

      // list: [{
      //   index: 1,
      //   truckLicenseId: 'SL1000000001212',
      //   createTime: '2023-04-12 19:27:35',
      //   name: '詹姆斯',
      //   Phone: '17710608230',
      //   address: '11'
      // }],
      list: [],
      form: {
        id: '', // 运输编号
        licensePlate: '', // 车牌号码
        startAgency: '', // 起始地
        endAgency: '', // 目的地
        drivers: '', // 司机
        planDepartureTime: '', // 计划发车时间
        planArrivalTime: '', // 计划到达时间
        actualDepartureTime: '', // 实际发车
        truckLicenseId: '', // 运单编号
        actualArrivalTime: '', // 实际到达
        deliverPicture: '',
        cargoPickUpPicture: '',
        cargoPicture: '',
        transportCertificate: '',
        aaa: './images/truck-empty.png'

      },
      aa: [],

      userId: this.$route.params.id
    }
  },
  async created() {
    const res = await getdetail(this.userId)
    console.log(111, res.data)
    this.aa.push(res.data.transportOrders)
    console.log(321321321, this.aa)

    // 交付照片 货品照片
    // this.$refs.deliverPicture.fileList = [{ url: res.data.deliverPicture }]
    this.form.deliverPicture = res.data.deliverPicture
    // 交付照片 凭证照片
    // this.$refs.cargoPickUpPicture.fileList = [{ url: res.data.cargoPickUpPicture }]
    this.form.cargoPickUpPicture = res.data.cargoPickUpPicture
    // 提货照片 货品照片
    // this.$refs.cargoPicture.fileList = [{ url: res.data.cargoPicture }]
    this.form.cargoPicture = res.data.cargoPicture
    // 提货照片 凭证照片
    // this.$refs.transportCertificate.fileList = [{ url: res.data.transportCertificate }]
    this.form.transportCertificate = res.data.transportCertificate
    this.list.push(res.data)
    console.log('list数组', this.list)

    this.form = res.data
    // this.form.licensePlate = this.form.trunk.licensePlate
    // 解构 form表单里面的数据
    // 目的地
    this.form.endAgency = res.data.endAgency.name
    // 起始地
    this.form.startAgency = res.data.startAgency.name
    // 车牌号码
    this.form.licensePlate = res.data.truck.licensePlate
    // 司机
    this.form.drivers = res.data.drivers.map(v => v.name).join(',')
    // 运单编号
    this.form.truckLicenseId = res.data.truck.truckLicenseId

    // 实际发车时间
    this.form.actualDepartureTime = this.form.actualDepartureTime ? res.data.actualDepartureTime : '暂未发车'
    // 实际发车时间
    this.form.actualArrivalTime = this.form.actualDepartureTime ? res.data.actualDepartureTime : '暂未到达'
  }
}
</script>

<style scoped>

</style>

<style lang="scss">
body{
  background-color: #f3f5f9;
}
 .el-input__inner {
    background-color: #fff !important;
    border: none;
    height: 20px;
    color: #818693;
}
.el-collapse-item__header{
    height: 60px;
    background-color: #f8faff;
    padding: 20px 20px 20px 44px;
}
.el-upload--picture-card{
margin-top:50px
}

.el-form-item__label{
  margin-left: 30px;
}
a{
  color: blue;
}
.style{
  margin:20px 40px 40px 100px;
}
</style>
